import React from 'react'
import { connect } from 'react-redux'
import {messages} from "share/common";
import moment from 'moment'
import {Tabs, Spin, Alert, message} from 'antd'
import expenseService from 'containers/my-account/expense.service'
import 'styles/financial-management/finance-audit/scan-audit.scss'
import ResizeTable from "components/resize-table/resize-table";
import errorMessage from "share/errorMessage";
const TabPane = Tabs.TabPane;

class CertificatePreview extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [],
      data: [],
      pagination: {
        page: 0,
        total:0,
        pageSize:10,
      },
      loading: false,
      journalType: props.showExpensePrew ? 'GL_EXPENSE' : 'GL_WRITE_OFF'
    };
  }

  componentWillMount() {
    this.getCertificateList();
  };

  getCertificateList = (forceRefresh = false) => {
    const { journalType } = this.state;
    const { params } = this.props;
    this.setState({ loading: true });
    return expenseService.getCertificateList(Object.assign(params, {journalType, forceRefresh})).then(res => {
      forceRefresh && message.success(messages('financial-management.key955')/*已重新获取凭证数据*/);
      let columns = [];
      res.data && Object.keys(res.data[0]).map(item => columns.push({title: item, dataIndex: item}));
      this.setState({
        loading: false,
        columns,
        data: res.data || []
      });
    }).catch(err => {
      errorMessage(err.response);
      this.setState({ loading: false });
    })
  };

  onChangePrewTab = key => {
    this.setState({ journalType: key }, this.getCertificateList);
  };

  onRefresh = () => {
    this.getCertificateList(true);
  };

  render(){
    const { columns, data, pagination, loading } = this.state;
    const { showExpensePrew, showWriteOffPrew, bookDate } = this.props;
    let tips = !!bookDate ? `${messages('financial-management.key956',{arg1: moment(bookDate).format('YYYY-MM-DD')})/*记账日期：{arg1}，以此日期生成凭证预览*/};` :
      `${messages('financial-management.key957')/*记账日期为空，以当前日期生成凭证预览，最终将以单据置为【审核通过】的日期作为记账日期生成实际凭证*/};`;
    return (
      <div className="certificate-preview">
        <Spin spinning={loading}>
          <Tabs onChange={this.onChangePrewTab} size='small' type="card">
            {showExpensePrew && <TabPane tab={messages('financial-management.key958')/*费用凭证*/} key='GL_EXPENSE' />}
            {showWriteOffPrew && <TabPane tab={messages('financial-management.key959')/*核销凭证*/} key='GL_WRITE_OFF' />}
          </Tabs>
          <Alert
            message={
              <span>
                <p className='reset-margin-bottom'>{tips}</p>
                <p className='reset-margin-bottom'>
                  {messages('financial-management.key960')/*若修改了单据信息，请*/}
                  <span style={{margin: '0 6px', cursor: 'pointer'}} className='default-color-font' onClick={this.onRefresh}>{messages('financial-management.key961')/*刷新*/}</span>
                  {messages('financial-management.key962')/*重新获取最新凭证数据*/}
                </p>
              </span>}
            type="info"
            showIcon
            style={{marginBottom: 10}}
          />
          <ResizeTable
            columns={columns}
            dataSource={data}
            pagination={pagination}
            bordered
            minSize={140}
          />
        </Spin>
      </div>
    )
  }

}

function mapStateToProps(state) {
  return {
    user: state.login.user,
    authToken: state.main.authToken
  }
}

CertificatePreview.contextTypes = {
  router: React.PropTypes.object
};

export default connect(mapStateToProps)(CertificatePreview);
